<template>
  <div class="device-history-list">
    <div class="local-name">{{ deviceName }}（{{ serialNumber }}）</div>
    <div class="device-hisrory-search-form">
      <search-form
        v-model="searchForm"
        @searchHistory="searchHistory"
      ></search-form>
    </div>
    <div class="device-history-table-data">
      <el-table
        size="small"
        :data="tableData"
        stripe="border"
      >
        <el-table-column
          type="index"
          align="center"
          width="50px"
        ></el-table-column>
        <el-table-column
          prop="value_list"
          label="历史数据"
        >
          <template slot-scope="scope">
            <span
              v-for="value in scope.row.value_list"
              :key="value.value"
            > {{ value.display_name + '：' + value.value + (value.unit ? value.unit : '') }} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          width="160px"
        >
          <template slot-scope="scope">{{ toLocalTime(scope.row.created_at) }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paging-footer">
      <el-pagination
        background
        @size-change="pageSizeChangeHandler"
        @current-change="currentPageChangeHandler"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :page-sizes="pageSizes"
        layout="total,sizes, prev, pager, next, jumper"
        :total="totalCount"
        align="center"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import * as moment from 'moment';
import { MomentFormat } from '../../../../constants/common';
import { parseError } from '../../../../utils';
import SearchForm from './searchForm';
import { getDeviceHistoryListApi } from '../../../../api/device';
import { Message, MessageBox } from 'element-ui';
import device from '../../../../route/modules/device';

export default {
  name: 'DeviceHistoryList',
  components: {
    SearchForm
  },
  data() {
    return {
      deviceName: '',
      serialNumber: '',
      createdAt: 0,
      tableData: [],
      valueList: [],
      currentPage: 1,
      totalCount: 0,
      pageSize: 10,
      deviceUuid: this.$route.params.uuid,
      searchForm: {
        btnLoading: false,
        startTime: new Date(new Date(new Date().toLocaleDateString()).getTime()),
        endTime: new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000)
      }
    };
  },
  created() {
    this.deviceUuid = this.$route.query.uuid;
    this.deviceName = this.$route.query.name;
    this.serialNumber = this.$route.query.sn;
    this.searchHistory();
  },
  watch: {
    $route: {
      handler() {
        if (this.deviceUuid !== this.$route.params.uuid) {
          if (this.$route.params.uuid) {
            this.deviceUuid = this.$route.params.uuid;
            this.searchHistory();
          }
        }
      },
      deep: true
    }
  },
  methods: {
    toLocalTime(ns) {
      return moment(ns).format(MomentFormat);
    },
    searchHistory() {
      this.searchForm.btnLoading = true;
      getDeviceHistoryListApi(this.currentPage - 1, this.pageSize, this.deviceUuid, this.searchForm.startTime, this.searchForm.endTime)
        .then(({ total_count, data }) => {
          this.totalCount = total_count;
          this.tableData = data;
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => {
          this.searchForm.btnLoading = false;
        });
    },
    pageSizeChangeHandler() {
      this.currentPage = 1;
      this.searchHistory();
    },
    currentPageChangeHandler() {
      this.searchHistory();
    }
  }
};
</script>

<style lang="scss" scoped>
.device-history-list {
  .local-name {
    font-size: 24px;
    font-weight: 800;
    padding: 10px 10px 0 10px;
  }
  .device-hisrory-search-form {
    background-color: #fff;
    margin: 10px;
    padding: 10px;
  }
  .device-history-table-data {
    margin: 10px 10px 0 10px;
    span:nth-child(n + 2) {
      border-left: 1px solid #ccc;
    }
    span:nth-child(1) {
      padding-left: 0;
    }
    span {
      padding: 0 10px 0 10px;
    }
  }
  .paging-footer {
    background-color: #fff;
    padding: 10px;
    margin: 0 10px 10px 10px;
  }
}
</style>
